/*--------------------------------------------------------------------------.
|   _____                                    _   __  __      _              |
|  |  __ \                                  | | |  \/  |    | |             |
|  | |__) |_ _ ___ _____      _____  _ __ __| | | \  / | ___| |_ ___ _ __   |
|  |  ___/ _` / __/ __\ \ /\ / / _ \| '__/ _` | | |\/| |/ _ \ __/ _ \ '__|  |
|  | |  | (_| \__ \__ \\ V  V / (_) | | | (_| | | |  | |  __/ ||  __/ |     |
|  |_|   \__,_|___/___/ \_/\_/ \___/|_|  \__,_| |_|  |_|\___|\__\___|_|     |
|                                                                           |
+---------------------------------------------------------------------------+
| Styles for the password meter                                             |
'--------------------------------------------------------------------------*/

meter.password_meter {
  /* Reset the default appearance */
  -webkit-appearance: meter;
  -moz-appearance: meterbar;
  appearance: meter;

  height: 1.5em;
  border-radius: 5px;
  vertical-align: middle;
  margin-right: 5px;
  margin-left: 5px;

  background: none;
  background-color: $input-background-color;

  &::-webkit-meter-bar {
    background: none;
    background-color: $input-background-color;
  }

  &[value="1"] {
    &::-webkit-meter-optimum-value {
      background: darkred;
    }
    &::-moz-meter-bar {
      background: darkred;
    }
  }
  &[value="2"] {
    &::-webkit-meter-optimum-value {
      background: red;
    }
    &::-moz-meter-bar {
      background: red;
    }
  }
  &[value="3"] {
    &::-webkit-meter-optimum-value {
      background: yellow;
    }
    &::-moz-meter-bar {
      background: yellow;
    }
  }
  &[value="4"] {
    &::-webkit-meter-optimum-value {
      background: lightgreen;
    }
    &::-moz-meter-bar {
      background: lightgreen;
    }
  }
  &[value="5"] {
    &::-webkit-meter-optimum-value {
      background: green;
    }
    &::-moz-meter-bar {
      background: green;
    }
  }
}
